<template>
  <h2>{{$t("login.title")}}</h2>
  <div>
    <input v-model="user.username" type="text" placeholder="用户名">
  </div>
  <div>
    <input v-model="user.password" type="text" placeholder="密码">
  </div>
  <div>
    <button @click="loginBtn">{{$t("login.btn")}}</button>
  </div>
  <button @click="changeLanguage">切换语言</button>
</template>

<script lang='ts' setup>
import {IUser2} from "@/inerfaces/userInerface"
import {loginApi} from "@/apis/userApi"
import {useRouter} from "vue-router"
import {useI18n} from "vue-i18n"
import {userStore} from "@/store/userStore"

const user = ref<IUser2>({username:"",password:""})
const $router =  useRouter()
const {t,locale} = useI18n()
const userStoreData = userStore()

const loginBtn =async ()=>{
  console.log(user.value);
  const res = await loginApi(user.value)
  //角色名字
  const roleName = res.data.data.user.roleName;
  //用户名
  const username = res.data.data.user.username

  localStorage.setItem("token",res.data.data.token)
  localStorage.setItem("role",res.data.data.roles[0])
  userStoreData.changeStoreUsername(username)
  userStoreData.changeStoreRolename(roleName)
  $router.push("/home")
  
}

const changeLanguage = ()=>{
  locale.value = "zh-cn"
}
</script>

<style lang='scss' scoped>
</style>